iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
自我挑戰組

蚵蚵攻城記系列 第 5

[Day05] 水平置中(1/2) + block and inline

  • 分享至 

  • xImage
  •  

今天來練習一下水平置中
在這裡
central align
我們就在這裡結束吧!!

要是可以按一個鈕這麼簡單就好了!!

<div  class="intro">
  <p>Introduction</p>  
</div> 
.intro {
  font-size: 60px;
  color: #ff0000;
  background-color: #000;
  width:600px;
  text-align: center;
}

try

再來要置中,置中的按鈕呢?
我們用margin的方式來讓他置中吧!
CSS 中加入

margin: 0 auto;

就可以達成置中的效果囉!!
置中

maginvalue可以寫到四個!
value的數量不一樣代表了不一樣的意思。

margin: 0px
/*同時設定上下左右margin*/
margin: 0px 0px
/*value1代表上下margin、value2代表左右margin*/
margin: 0px 0px 0px
/*value1代表上margin、value2代表左右margin、value3代表下margin*/
margin: 0px 0px 0px 0px
/*value1代表上margin、value2代表右margin、
value3代表下margin、value4代表左margin*/

這個方式是用於block element
像是<div>、<p>、<h1>


今天嘗試了水平置中的第一個方法,
在搜尋網路上前輩們的介紹看到了
block elementinline element的觀念,
想要先筆記一下。

block element : 就是一個區塊,有自己的高度 (height)也有寬度 (width),佔據了一整行,除非用float
inline element : Height and width 不能設定,elements 都會在同一行呈現。

有點攏統,
就還是實做一遍。

<div class="block">
  <p>Rabbit</p>
  <p>Rat</p>
  <P>Mice</p>
</div>
<div class="inline">
  <p>Rabbit</p>
  <p>Rat</p>
  <P>Mice</p>
</div>
.block p {
  display: block;
  background-color: #ff0000;    
}
.inline p {
  display: inline;
  background-color: #00ff00;
}

block and inline

這裡可以看出 block佔據一整行的意思及 inline可以在同一行呈現 elements。
如果都加上

width: 300px
height: 50px

block and inline
就可以了解到 width and height 可不可以設定了。


上一篇
[Day04] 我所認識的CSS
下一篇
[Day06]水平置中 (2/2) + inline block
系列文
蚵蚵攻城記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言